"use client";
/*
 * @Author: hongbin
 * @Date: 2025-04-29 17:59:16
 * @LastEditors: hongbin
 * @LastEditTime: 2025-05-02 09:37:25
 * @Description:
 */
import { FC, useEffect, useState } from "react";
import { styled } from "styled-components";
import { FlexDiv, ReserveSeat } from "@/styled";
import Image from "next/image";
import Header from "./Header";
import Footer from "./Footer";
import LeftMain from "./LeftMain";
import RightMain from "./RightMain";
import BarChart from "./BarChart";
import { generateRandomNumbers } from "@/lib/utils";
import { Blockquote, Code, Heading } from "@radix-ui/themes";
import GaugeChart from "./GaugeChart";
import BarRowChart from "./BarRowChart";
import LineChart from "./LineChart";
import RadarChart from "./RadarChart";

interface IProps {}

const Charts: FC<IProps> = () => {
    const [barChartData, setBarChartData] = useState([39, 47, 40, 84, 35, 90, 71]);

    useEffect(() => {
        let t: NodeJS.Timeout;

        const tick = () => {
            t = setTimeout(() => {
                setBarChartData(generateRandomNumbers(7, 0, 100));
                tick();
            }, 2000);
        };

        // tick();

        return () => {
            clearTimeout(t);
        };
    }, []);

    return (
        <Container>
            <Header />
            <LeftMain>
                <FlexDiv
                    items='flex-start'
                    justify='flex-start'
                    style={{ pointerEvents: "auto" }}
                    column>
                    <ReserveSeat
                        width='100%'
                        height='20px'
                    />
                    <BarChart data={barChartData} />

                    <FlexDiv
                        padding='20px 0 10px 0'
                        justify='space-between'>
                        <FlexDiv
                            width='150px'
                            padding='15px 0 0 20px'>
                            <Heading color='sky'>GaugeChart</Heading>
                            <Blockquote
                                color='sky'
                                size='1'>
                                <Code>GaugeChart</Code>
                                <ReserveSeat
                                    width='100%'
                                    height='5px'
                                />
                                <Code>{` data=${barChartData[0]}`}</Code>
                            </Blockquote>
                        </FlexDiv>
                        <GaugeChart data={barChartData[0]} />
                    </FlexDiv>

                    <ReserveSeat
                        width='100%'
                        height='10px'
                    />

                    <FlexDiv justify='space-between'>
                        <FlexDiv
                            width='150px'
                            padding='15px 0 0 20px'>
                            <Heading color='sky'>Quick2</Heading>
                            <Blockquote
                                color='sky'
                                size='1'>
                                certainly the jumps over
                            </Blockquote>
                        </FlexDiv>
                        <GaugeChart
                            color1='#faa'
                            color2='#f00'
                            data={barChartData[1]}
                        />
                    </FlexDiv>

                    <FlexDiv column justify="flex-start" items="flex-start"  padding='30px 0 0 20px'>
                        <Code>BAR</Code>
                        <BarRowChart data={barChartData.reverse()} />
                    </FlexDiv>
                </FlexDiv>
            </LeftMain>

            <RightMain>
                <FlexDiv
                    style={{ pointerEvents: "auto" }}
                    items='flex-end'
                    justify='flex-start'
                    column>
                    <ReserveSeat
                        width='100%'
                        height='20px'
                    />
                    <LineChart
                        data1={barChartData}
                        data2={barChartData.map(() => 100 * Math.random())}
                    />

                    <FlexDiv
                        padding='20px 0 10px 0'
                        justify='space-between'>
                        <GaugeChart data={barChartData[0]} />

                        <FlexDiv
                            width='150px'
                            padding='15px 30px 0 0'>
                            <Heading color='sky'>GaugeChart</Heading>
                            <Blockquote
                                color='sky'
                                size='1'>
                                <Code>GaugeChart</Code>
                                <ReserveSeat
                                    width='100%'
                                    height='5px'
                                />
                                <Code>{` data=${barChartData[0]}`}</Code>
                            </Blockquote>
                        </FlexDiv>
                    </FlexDiv>

                    <ReserveSeat
                        width='100%'
                        height='10px'
                    />

                    <FlexDiv justify='space-between'>
                        <GaugeChart
                            color1='#faa'
                            color2='#f00'
                            data={barChartData[1]}
                        />
                        <FlexDiv
                            width='150px'
                            padding='15px 20px 0 0'>
                            <Heading color='sky'>Quick2</Heading>
                            <Blockquote
                                color='sky'
                                size='1'>
                                certainly the jumps over
                            </Blockquote>
                        </FlexDiv>
                    </FlexDiv>

                    <FlexDiv
                        column
                        justify='flex-start'
                        items='flex-start'
                        padding='30px 30px 0 0'>
                        <Blockquote color='sky'>
                            <Code>BAR</Code>
                        </Blockquote>
                        <RadarChart data={barChartData} />
                    </FlexDiv>
                </FlexDiv>
            </RightMain>
            <Footer />
        </Container>
    );
};

export default Charts;

const Container = styled.div`
    pointer-events: none;

    position: fixed;
    width: 100vw;
    height: 100vh;

    /* background: #ffaaaa22; */
    /* background-image: url("/bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; */
    /* background: url('/bg.png') 100%/100% no-repeat fixed; */
`;
